<!--<template>-->
<!--    <div class="type">-->
<!--        <div class="left">-->
<!--            <div class="items">-->
<!--                <div @click="scroll(index)" :class="{'selected':index==pos}" class="item border-bottom-1px"-->
<!--                     v-for="(item,index) in types"-->
<!--                     :key="index">-->
<!--                    <span>{{item.name}}</span>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="right">-->
<!--            <cube-scroll :scrollEvents="['scroll']" @scroll="scrollListen" ref="scroll" :options="options">-->
<!--                <div class="items">-->
<!--                    <div class="item" ref="item" v-for="(item,index) in types" :key="index">-->
<!--                        <div class="title">{{item.name}}</div>-->
<!--                        <div class="list">-->
<!--                            <div class="li" v-for="(li,index) in item.children" :key="index">-->
<!--                                <img class="img" :src="li.img" alt="">-->
<!--                                <span class="li-name">{{li.name}}</span>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </cube-scroll>-->
<!--        </div>-->
<!--    </div>-->
<!--</template>-->

<!--<script>-->
<!--    export default {-->
<!--        mounted() {-->
<!--            this.$nextTick(() => {-->
<!--                this.calHeight()-->
<!--            })-->
<!--        },-->
<!--        computed: {-->
<!--            pos() {-->
<!--                let index =0;-->
<!--                for (let i = 0; i < this.heights.length; i++) {-->
<!--                    //滚到初始位置-->
<!--                    if (-this.posY <= 0) {-->
<!--                        index= 0;-->
<!--                    }-->


<!--                    if (this.heights[i + 1]) {-->
<!--                        //没超出继续比较-->
<!--                        if (this.heights[i] <= -this.posY && -this.posY < this.heights[i + 1]) {-->
<!--                            index = i-->
<!--                            continue;-->
<!--                        }-->
<!--                    }-->
<!--                }-->
<!--                return index-->
<!--            }-->
<!--        },-->
<!--        methods: {-->
<!--            scrollListen(pos) {-->
<!--                this.posY = pos.y-->
<!--            },-->
<!--            scroll(index) {-->
<!--                this.$refs.scroll.scrollTo(0,-this.heights[index], 500)-->
<!--            },-->
<!--            calHeight() {-->
<!--                this.heights.push(0);-->
<!--                let sumH = 0-->
<!--                this.$refs.item.forEach(el => {-->
<!--                    sumH += el.clientHeight-->
<!--                    this.heights.push(sumH)-->
<!--                })-->
<!--            }-->
<!--        },-->
<!--        data() {-->
<!--            return {-->
<!--                posY: 0,-->
<!--                heights: [],-->
<!--                options: {-->
<!--                    startY: 0-->
<!--                },-->
<!--                position: 0,-->
<!--                types: [-->
<!--                    {-->
<!--                        name: "为你推荐",-->
<!--                        children: [-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            }-->
<!--                        ]-->
<!--                    },-->
<!--                    {-->
<!--                        name: "女装",-->
<!--                        children: [-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            }-->
<!--                        ]-->
<!--                    },-->
<!--                    {-->
<!--                        name: "男装",-->
<!--                        children: [-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            }-->
<!--                        ]-->
<!--                    },-->
<!--                    {-->
<!--                        name: "女鞋",-->
<!--                        children: [-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            }-->
<!--                        ]-->
<!--                    },-->
<!--                    {-->
<!--                        name: "男鞋",-->
<!--                        children: [-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            }-->
<!--                        ]-->
<!--                    },-->
<!--                    {-->
<!--                        name: "手表配饰",-->
<!--                        children: [-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            },-->
<!--                            {-->
<!--                                name: "为你推荐",-->
<!--                                img: require("@/assets/dimg.png")-->
<!--                            }-->
<!--                        ]-->
<!--                    }-->
<!--                ]-->
<!--            }-->
<!--        }-->
<!--    }-->
<!--</script>-->

<!--<style scoped lang="stylus">-->
<!--    .type-->
<!--        height 100%-->
<!--        display flex-->
<!--        .left-->
<!--            flex 0 0 100px-->
<!--            background-color white-->

<!--            .items-->
<!--                .item-->
<!--                    border-color #DCDCDC-->
<!--                    height 41px-->
<!--                    text-align center-->
<!--                    background-color white-->
<!--                    color #6F6F6F-->
<!--                    font-size 12px-->
<!--                    line-height 41px-->

<!--                    &.selected-->
<!--                        background-color #EFEFEF-->
<!--                        color #F7895E-->
<!--                        border-left 5px solid #F7895E-->

<!--        .right-->
<!--            z-index 0-->
<!--            flex 1-->
<!--            .items-->
<!--                padding-bottom 120%-->
<!--                background-color #EFEFEF-->
<!--                padding-left 9px-->

<!--                .item-->
<!--                    .title-->
<!--                        color #6F6F6F-->
<!--                        font-weight 300-->
<!--                        padding 15px 0-->
<!--                        font-size 12px-->

<!--                    .list-->
<!--                        border-radius 5px-->
<!--                        background-color white-->
<!--                        display flex-->
<!--                        flex-wrap wrap-->
<!--                        justify-content space-around-->

<!--                        .li-->
<!--                            padding 10px 10px-->
<!--                            display flex-->
<!--                            flex-direction column-->
<!--                            justify-content center-->
<!--                            align-items center-->

<!--                            .img-->
<!--                                margin-bottom 5px-->
<!--                                height 65px-->
<!--                                width 65px-->

<!--                            .li-name-->
<!--                                color #6F6F6F-->
<!--                                font-size 10px-->


<!--</style>-->